<script setup lang="ts">
import {reactive} from "vue";
import {Lock, User} from "@element-plus/icons-vue";
import {loginService} from "@/api/server/admin.ts";
import {setServerToken} from "@/utils/token.ts";
import router from "@/router";
import {ElMessage} from "element-plus";

const loginForm = reactive({
  account: '',
  password: '',
})

async function login() {
  try {
    const result = await loginService(loginForm.account.trim(), loginForm.password.trim());
    console.log(result);
    setServerToken(result);
    await router.push('/server/home');
    reset();
  } catch (error:any) {
    ElMessage.error(error)
  }
}

function reset() {
  loginForm.account = '';
  loginForm.password = '';
}
</script>

<template>
  <div class="container">
    <el-card style="width: 400px">
      <template #header>
        <div class="card-header">
          <span>OJ后台管理</span>
        </div>
      </template>
      <el-form :model="loginForm" style="width: 300px">
        <el-form-item>
          <el-input
              v-model="loginForm.account"
              style="width: 300px"
              placeholder="请输入账号"
              :prefix-icon="User"
          />
        </el-form-item>
        <el-form-item>
          <el-input
              v-model="loginForm.password"
              :prefix-icon="Lock"
              style="width: 300px"
              type="password"
              placeholder="请输入密码"
              show-password
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.container {
  background-color: ghostwhite;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  :deep(.el-card) {
    .card-header {
      text-align: center;
      font-weight: bold;
      font-size: 20px;
    }
    .el-card__body {
      display: flex;
      justify-content: center;
      .el-form {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .el-form-item:last-child {
          .el-button:first-child {
            margin-right: 30px;
          }
          .el-form-item__content {
            display: flex;
            justify-content: center;
          }
        }
      }
    }

  }
}
</style>